Html视频直播

发表于 更新于

Html 视频直播

参考：

https://imququ.com/post/html5-live-player-2.html

https://segmentfault.com/a/1190000000392586

安装（Mac）

  • 安装ffmepg
1
2
brew install ffmpeg
brew link ffmpeg
  • 安装nodejs
1
brew install node
  • 安装ws模块

列出安装的模块

1
2
3
4
5
6
7
# 列出安装的模块
npm ls -g installed
npm ls  installed

＃安装ws模块
npm install -g ws
sudo npm link ws

服务端

clone jsmpeg 项目并修改
1
git clone git@github.com:phoboslab/jsmpeg.git

jsmpeg 也对视频文件编码方式有一些要求：不支持 B-Frames，视频宽度必须是 2 的倍数。还是可以用 FFmpeg 来转换：

ffmpeg -i in.mp4 -f mpeg1video -vf “crop=iw-mod(iw,2):ih-mod(ih,2)” -b 0 out.mpg

启动nodejs
1
node stream-server.js xuqi 9091 9092

stream-server.js在jsmpeg工程中，三个参数分别是加密串、HTTP 端口、WS 端口。

启动ffmepg
1
2
3
4
5
6
7
8
9
10
11
＃ 列出可用的摄像头
ffmpeg -f avfoundation -list_devices true -i ""

＃ 启动视频
ffmpeg -re -i fox.mpg -codec copy -f mpeg1video http://127.0.0.1:9091/xuqi/640/360

＃ 启动摄像头
ffmpeg -f avfoundation -framerate 30 -i "0" -f mpeg1video -r 30 -vf scale=640:360 http://127.0.0.1:9091/xuqi/640/360

＃ 启动监视桌面
ffmpeg -f avfoundation -framerate 30 -i "1" -f mpeg1video -r 30 -vf scale=640:360 http://127.0.0.1:9091/xuqi/640/360

客户端

修改stream-example.html

1
2
3
4
5
6
7
<script type="text/javascript">
	// Setup the WebSocket connection and start the player
	var client = new WebSocket( 'ws://127.0.0.1:9092/' );

	var canvas = document.getElementById('videoCanvas');
	var player = new jsmpeg(client, {canvas:canvas, autoplay: true});
</script>

如果非本机也要能访问这个地址，需要将127.0.0.1这个ip改成合适的ip。

运行效果

安装(Raspberry)

参照：

http://blog.rainy.im/2015/05/26/webcam-on-raspberry-pi/

  • 安装ffmepg
1
2
3
4
5
6
7
8
9
10
11
12
13
## libx264 support
git clone git://git.videolan.org/x264  
cd x264  
./configure --host=arm-unknown-linux-gnueabi --enable-static --disable-opencl
make  
sudo make install

## ffmpeg
git clone git://git.ffmpeg.org/ffmpeg  
cd ffmpeg  
sudo ./configure --arch=armel --target-os=linux --enable-gpl --enable-libx264 --enable-nonfree  
make # 这一步可能相当相当漫长，在我这里跑了有一个多小时  
sudo make install
  • 安装nodejs
1
2
3
wget http://node-arm.herokuapp.com/node_latest_armhf.deb  
sudo dpkg -i node_latest_armhf.deb  
node -v
  • 安装ws模块